<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>部门管理</title>
	<link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
	<link href="{{ url_for('static', filename='plugins/bootstrap-table/bootstrap-table.css') }}" rel="stylesheet">
	<link href="{{ url_for('static', filename='plugins/font-awesome/css/font-awesome.css') }}" rel="stylesheet">
	<link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
	<link rel="stylesheet" href="{{ url_for('static', filename='css/public.css') }}">
	<!-- jquery 提示插件css -->
	<link href="{{ url_for('static', filename='plugins/toastr.min.css') }}" rel="stylesheet">
	<!--zTree-->
	<link rel="stylesheet" href="{{ url_for('static', filename='plugins/zTree/zTreeStyle.css') }}">
</head>
<body style="background-color: #f3f3f4;">
<link rel="stylesheet" href="{{ url_for('static', filename='plugins/jedate/jedate.css') }}">
		<div style="padding: 0 15px;" id="content">
			<div class="row wrapper border-bottom white-bg page-heading">
				<div class="col-lg-10">
					<h2>部门管理</h2>
					<ol class="breadcrumb">
						<li>
							<a>系统管理</a>
						</li>
						<li>
							<a>组织机构管理</a>
						</li>
						<li class="active">
							<strong>部门管理</strong>
						</li>
					</ol>
				</div>
			</div>
			<!--table 表格-->
			<div class="row">
				<div class="col-lg-2">
		            <div class="ibox border-all">
		                <div class="ibox-title">
		                    <h5>部门信息</h5>
		                </div>
		                <div class="ibox-content">
		                    <p class="text-center" v-if="leftTreeLoading">正在加载中,请稍后.....</p>
		                    <p class="text-center" v-if="!leftTreeLoading && leftTreeList.length==0">暂时没有数据,请添加</p>
		                    <ul id="myTree" class="ztree"></ul>
		                </div>
		            </div>
		        </div>
				<div class="col-lg-10">
					<!--<table id="table"></table>-->
					<div class="ibox border-all">
						<div class="ibox-title">
							<h5>创客({{leftTreeType.name}})公司&nbsp;部门信息</h5>
						</div>
						<div class="ibox-content" style="position: relative;">
							<button class="btn btn-default pull-right my-btn my-btn-remove" onclick="deleteBtnClick()">删除</button>
							<button class="btn btn-default pull-right my-btn my-btn-pencil" onclick="editBtnClick()">编辑</button>
							<button class="btn btn-default pull-right my-btn my-btn-add" onclick="addBtnClick()">添加</button>
							<button class="btn btn-default my-btn my-search-btn my-btn-search" style="top: 16px;left: 222px;">查询</button>
							<table id="table"
								   data-toggle="table"
								   data-toolbar=".toolbar"
								   data-pagination="true"
								   data-maintain-selected="true"
								   data-search="true"
								   data-show-refresh="true"
								   data-search-align="left"
								   data-toolbar-align="right">
								<thead>
									<tr>
										<th></th>
										<th data-field="name">部门名称</th>
										<th data-field="code">部门编号</th>
										<th data-field="abbreviation">部门简称</th>
										<th data-field="character">部门性质</th>
										<th data-field="person_in_charge">负责人</th>
										<th data-field="phone_number">电话号</th>
										<th data-field="extension_number">分机号</th>
										<th data-field="description">备注</th>
									</tr>
								</thead>
							</table>
						</div>
					</div>
				</div>
			</div>
			<!--添加 模态框-->
			<div id="modal" class="modal fade">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title">{{modalType}}部门</h4>
						</div>
						<div class="modal-manage">
							<div class="form-group col-xs-6">
								<label class="manage-title">部门名称<span class="glyphicon glyphicon-asterisk mandatory"></span></label>
								<input type="text" class="form-control form-manage" placeholder="请输入部门名称" v-model="modalData.name">
							</div>
							<div class="form-group col-xs-6">
								<label class="manage-title">部门编号<span class="glyphicon glyphicon-asterisk mandatory"></span></label>
								<input type="text" class="form-control form-manage" placeholder="请输入部门编号" v-model="modalData.code">
							</div>
							<div class="form-group col-xs-6">
								<label class="manage-title">部门简称<span class="glyphicon glyphicon-asterisk mandatory"></span></label>
								<input type="text" class="form-control form-manage" placeholder="请输入部门简称" v-model="modalData.abbreviation">
							</div>
							<div class="form-group col-xs-6">
								<label class="manage-title">部门性质<span class="glyphicon glyphicon-asterisk mandatory"></span></label>
								<select class="form-control form-manage" style="padding: 0;" v-model="modalData.character">
									<option value="===请选择===">===请选择===</option>
									<option value="综合性">综合性</option>
									<option value="协调性">协调性</option>
									<option value="咨询性">咨询性</option>
									<option value="生产性">生产性</option>
									<option value="其他性">其他性</option>
								</select>
							</div>
							<div class="form-group col-xs-6">
								<label class="manage-title">上级部门：</label>
								<input id="company" class="form-control form-manage" autocomplete="off" placeholder="===请选择===" v-model="modalDataParentName.name">
								<ul id="treeDemo" class="ztree modalZTree border-all">
									<li v-if="departmentTreeLoading">正在加载中,请稍后.....</li>
									<li v-if="!departmentTreeLoading && departmentTreeLoading.length==0">暂时没有数据,请添加</li>
								</ul>
							</div>
							<div class="form-group col-xs-6">
								<label class="manage-title">负责人：</label>
								<input type="text" class="form-control form-manage" placeholder="" v-model="modalData.person_in_charge">
							</div>
							<div class="form-group col-xs-6">
								<label class="manage-title">电话号：</label>
								<input type="text" class="form-control form-manage" placeholder="" v-model="modalData.phone_number">
							</div>
							<div class="form-group col-xs-6">
								<label class="manage-title">分机号：</label>
								<input type="text" class="form-control form-manage" placeholder="" v-model="modalData.extension_number">
							</div>
							<div class="form-group col-xs-6">
								<label class="manage-title">邮箱：</label>
								<input type="text" class="form-control form-manage" placeholder="" v-model="modalData.email">
							</div>
							<div class="form-group col-xs-6">
								<label class="manage-title">传真：</label>
								<input type="text" class="form-control form-manage" placeholder="" v-model="modalData.fax">
							</div>
							<div class="form-group col-xs-12">
								<label class="manage-title">备注：</label>
								<textarea class="form-control form-manage form-manage2" style="resize: none" v-model="modalData.description"></textarea>
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
							<button type="button" class="btn btn-primary submit" id="add" onclick="add()">确认</button>
						</div>
					</div>
					<!-- /.modal-content -->
				</div>
				<!-- /.modal-dialog -->
			</div>
			<!--删除 模态-->
			<div id="deleteModal" class="modal fade">
				<div class="modal-dialog" style="width: 400px;">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						</div>
						<div class="modal-manage">
							<h3 class="text-center">是否删除当前项</h3>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
							<button type="button" class="btn btn-primary submit" onclick="deleteTable()">确认</button>
						</div>
					</div>
					<!-- /.modal-content -->
				</div>
				<!-- /.modal-dialog -->
			</div>
		</div>
		<!-- 主要的脚本 -->
		<script src="{{ url_for('static', filename='js/jquery-3.1.1.min.js') }}"></script>
		<script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
		<script src="{{ url_for('static', filename='plugins/bootstrap-table/bootstrap-table.js') }}"></script>
		<script src="{{ url_for('static', filename='plugins/bootstrap-table/bootstrap-table-zh-CN.min.js') }}"></script>
		<!-- Toastr -->
		<script src="{{ url_for('static', filename='plugins/toastr/toastr.min.js') }}"></script>
		<!--zTree-->
		<script src="{{ url_for('static', filename='plugins/zTree/jquery.ztree.core.js') }}"></script>
		<!--Ztreegrid-->
		<script src="{{ url_for('static', filename='plugins/bootstrap-table/bootstrap-table-tree.js') }}"></script>
		<!-- 定制的javascript和插件 -->
		<script src="{{ url_for('static', filename='js/ga.js') }}"></script>
		<script src="{{ url_for('static', filename='js/vue.min.js') }}"></script>
		<!--公共服务插件-->
		<script src="{{ url_for('static', filename='js/publicServe.js') }}"></script>
		<script>
			var vm = new Vue({
				el: '#content',
				data: {
					leftTreeLoading:true,//左侧树结构加载判断
                    leftTreeList:[],     //左侧树结构值
                    leftTreeType:{
                    	name:''
                    },
			   departmentTreeLoading:true,//部门树结构加载判断
					departmentTreeList:[],     //部门树结构值
					departmentTreeType:{
					   name:''
					},
					tableList: [],      //bootstrapTable的树结构
					modalDataParentName:{
						name:''
					}, //模态中选定树的名称
					modalType: '添加',
					modalData: { //模态输入框中的值
                        name: "", //部门名称
						code: '', //部门编号
						description: null, //描述
						abbreviation: '', //部门简称
						extension_number: '', //分机号
						dis_order: null, //排序
						status: 0, //状态(0|1 0表示该机构在系统中正常 1表示该机构在系统中被禁用)
						parent_id: null, //上级部门id
						person_in_charge: '', //负责人
						phone_number: '', //电话
						email: '', //邮箱
						fax: '', //传真
						zip_code: '', //邮编
						character: '', //部门性质
					}
				},
			});
			//获取机构tree的值并绘制
			function getLeftZTree() {
							vm.leftTreeLoading = true;
							//获取树形结构
							$.ajax({
								url: '/core/organization/get_tree_all/',
								type: 'POST',
								dataType: "json",
								data: '',
								async: true,
								contentType: "application/json",
								success: function (response) {
									if(response && response.success==1){
										vm.leftTreeLoading = false;
										vm.leftTreeList = response.data;
										//绘制zTree树
										renderZTree();
										//通过当前数据的第一行获取数据绘制表格
										if(vm.leftTreeList[0]){
											vm.leftTreeType = vm.leftTreeList[0];
											tableList(vm.leftTreeList[0].id)
										}
									}else{
										toastr.info(response.error_msg);
									}
								},
								error: function (err) {
									toastr.info(err);
									vm.leftTreeLoading = false;
								}
							});
						}

			//部门树结构
			function getdepartmentZTree() {
		        vm.departmentTreeLoading = true;
		        //获取树形结构
                $.ajax({
                    url: '/core/department/get_tree_all/',
                    type: 'POST',
                    dataType: "json",
                    data: '',
                    async: true,
                    contentType: "application/json",
                    success: function (response) {
                        if(response && response.success==1){
                            vm.departmentTreeLoading = false;
                            vm.departmentTreeList = response.data;
                            //绘制zTree树
                            renderZTree();
                        }else{
                            toastr.info(response.error_msg);
                        }
                    },
                    error: function (err) {
                        toastr.info(err);
                        vm.departmentTreeLoading = false;
                    }
                });
		    }
			//通过机构 id 获取部门信息  并且绘制table
            function tableList(id) {
                //获取bootstrapTable的树结构
                $.ajax({
                    url: '/core/department/get_all_by_organization_id/',
                    type: 'POST',
                    dataType: "json",
                    data:JSON.stringify({id:id}),
                    async: true,
                    contentType: "application/json",
                    success: function (response) {
                        if(response && response.success == 1) {
                            vm.tableList = response.data;
                            $table.bootstrapTable('load', vm.tableList);
                        }
                    }
                });
            }
			//zTree配置
			var setting = {
				view: {
					showLine: false
				},
				callback: {
					onClick: leftZTreeClick
				}
			};
            //添加权限模态zTree调用
            var permissionSetting = {
                view: {
                    showLine: false
                },
                callback: {
                    onClick: permissionZTreeClick
                }
            };
			  // 左侧zTree点击事件
		    function leftZTreeClick(event, treeId, treeNode, clickFlag) {
                //TODO:通过点击发送请求 获取到表
                //左侧树选定值以后 重绘表格数据
                tableList(treeNode.id);
                //将表格title改变
                vm.leftTreeType = treeNode;
            }
            //添加权限模态中选择类型 触发zTree
            function permissionZTreeClick(event, treeId, treeNode, clickFlag) {
                vm.modalDataParentName = treeNode;
            }
			//点击除模态中的zTree外 关闭zTree
			function onBodyDown(event) {
				if(!(event.target.id == "company" || event.target.id == "treeDemo" || $(event.target).parents("#treeDemo").length > 0)) {
					$("#treeDemo").fadeOut("fast");
					$("body").unbind("mousedown", onBodyDown);
				}
			}
			$('#company').click(function() {
				$("#treeDemo").slideToggle("fast");
				$("body").bind("mousedown", onBodyDown);
			});
			$table = $('#table');
			//bootstrapTable配置
			$table.bootstrapTable({
				toolbar: '#toolbar',
				sidePagination: 'client',
				pagination: false,
				treeView: true, //treeView:true表示启用树表格模式；
				treeId: "id", //treeId:'Id'表示每一行tree的id；
				treeField: "name", //treeField:'name'表示要对那一列进行展开；
				treeRootLevel: 1, //treeRootLevel:1表示树根的级别。
				clickToSelect: true,
				collapseIcon: "glyphicon glyphicon-menu-right", //折叠样式
				expandIcon: "glyphicon glyphicon-menu-down", //展开样式
				columns: //列表序号
					[{
						//field: 'Number',//可不加
						// title: 'Number',//标题  可不加
						formatter: function(value, row, index) {
							return index + 1;
						}
					}]
			});
			//添加按钮被点击
			function addBtnClick() {
				//清空 vm.modalData 中的值
				vm.modalData = {
                    name: "", //部门名称
					code: '', //部门编号
					description: null, //描述
					abbreviation: '', //部门简称
					extension_number: '', //分机号
					dis_order: null, //排序
					status: 0, //状态(0|1 0表示该部门在系统中正常 1表示该部门在系统中被禁用)
					parent_id: null, //上级部门id
					org_id:vm.leftTreeType.id,//上级机构id
					person_in_charge: '', //负责人
					phone_number: '', //电话
					email: '', //邮箱
					fax: '', //传真
					zip_code: '', //邮编
					character: '', //部门性质
				};
				vm.modalType = "添加";
				$("#modal").modal('show');
			}
			//编辑按钮被点击
			function editBtnClick() {
       				 if (!vm.modalData.id) {
           			toastr.info("编辑时最少需要选中一行!");
           			 return
        	}
			//删除按钮被点击
			function deleteBtnClick() {
       				if (!vm.modalData.id) {
            		toastr.info("删除时最少需要选中一行!");
            		return
        	}
        $("#deleteModal").modal('show');
    }
        //将当前行的属性添加给 modalData 供模态框绑定
        vm.modalType = "修改";
        $("#modal").modal('show');
    }
			//删除表格中一项
			function deleteTable() {
                $.ajax({
                    url: '/core/department/del/',
                    type: 'POST',
                    dataType: "json",
                    data: JSON.stringify({id: vm.modalData.Id}),
                    async: true,
                    contentType: "application/json",
                    success: function (response) {
                        if(response && response.success == 1) {
                            $("#deleteModal").modal('hide');
                            //获取zTree信息 并且绘制
                            tableList(vm.leftTreeType.id);
                            //重新绘制莫太中的树结构
                            getdepartmentZTree();
                            toastr.success('删除成功');
                        } else {
                            toastr.info(response.error_msg);
                        }
                    },
                    error: function (err) {
                        toastr.info(err);
                    }
                });
			}
			//添加 编辑一行
			function add() {
				console.log(vm.modalData);
				if(!vm.modalData.name) {
					toastr.info('部门名称不能为空!');
					return
				}
				if(vm.modalData.character == '===请选择===') {
					toastr.info('部门性质不能为空!');
					return
				}
				 //将模态中的数据深度克隆一份 防止旧值被修改
		        let newModalData = Object.assign({},vm.modalData);
		        //checkBox 将true false 转换为 0 1
		        newModalData.status?newModalData.status = 0:newModalData.status = 1;      //当前状态
						newModalData.parent_id = vm.modalDataParentName.id;
				// 修改
				if(vm.modalType == "修改") {
                    $.ajax({
                        url: '/core/department/edit/',
                        type: 'POST',
                        dataType: "json",
                        data: JSON.stringify(newModalData),
                        async: true,
                        contentType: "application/json",
                        success: function (response) {
                            if(response && response.success == 1) {
                                $("#modal").modal('hide');
                                //获取zTree信息 并且绘制
                                tableList(vm.leftTreeType.id);
                                //重新绘制莫太中的树结构
                                getdepartmentZTree();
                                toastr.success('修改成功')
                            } else {
                                toastr.info(response.error_msg);
                            }
                        },
                        error: function (err) {
                            toastr.info(err);
                        }
                    });
				} else {
                    $.ajax({
                        url: '/core/department/add/',
                        type: 'POST',
                        dataType: "json",
                        data: JSON.stringify(newModalData),
                        async: true,
                        contentType: "application/json",
                        success: function (response) {
                            if(response && response.success == 1) {
                                $("#modal").modal('hide');
                                //获取zTree信息 并且绘制
                                tableList(vm.leftTreeType.id);
                                //重新绘制莫太中的树结构
                                getdepartmentZTree();
                                toastr.success('添加成功');
                            } else {
                                toastr.info(response.error_msg);
                            }
                        },
                        error: function (err) {
                            toastr.info(err);
                        }
                    });
				}
			};
			 //绘制zTree树 方法
		    function renderZTree() {
		        //权限模态中树绘制
		        $.fn.zTree.init($("#treeDemo"), permissionSetting,vm.departmentTreeList);
		        //左侧树
		        $.fn.zTree.init($("#myTree"), setting, vm.leftTreeList);
		    };
			//dom渲染完成后加载
			$(document).ready(function() {
				//获取zTree信息 并且绘制
                getLeftZTree();
                getdepartmentZTree();
			});
		    //弹出框提示配置
			toastr.options = {
				"closeButton": true,
				"debug": false,
				"progressBar": true,
				"preventDuplicates": false,
				"positionClass": "toast-bottom-right",
				"onclick": null,
				"showDuration": "400",
				"hideDuration": "1000",
				"timeOut": "2000",
				"extendedTimeOut": "1000",
				"showEasing": "swing",
				"hideEasing": "linear",
				"showMethod": "fadeIn",
				"hideMethod": "fadeOut"
			};
		</script>
</body>
</html>
